<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleClose"
      :destroyOnClose="true"
      :minHeight="650"
      :width="1200"
    >
      <Row :gutter="24">
        <Col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
          <Tabs v-model:activeKey="activeKey">
            <TabPane key="1" :tab="t('routes.demo.partManager.productStructure')">
              <div style="overflow-y: scroll; overflow-x: hidden; height: 550px">
                <Tree
                  :tree-data="partData"
                  v-model:expandedKeys="expandedKeys"
                  @select="selectPart"
                />
              </div>
            </TabPane>
          </Tabs>
        </Col>
        <Col
          :xs="1"
          :sm="1"
          :md="1"
          :lg="1"
          :xl="1"
          style="display: flex; justify-content: center"
        />
        <Col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
          <Row>
            <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <BasicTable @register="registerTable">
                <!-- 状态 -->
                <template #state="{ text: state }">
                  {{ proxy.$filters.filterPartStatus(state) }}
                </template>
                <!-- 创建时间 -->
                <template #creattime="{ text: creattime }">
                  <span>
                    {{ proxy.$filters.filterTime(creattime) }}
                  </span>
                </template>
                <!-- 文件/零件 -->
                <template #fileorpart="{ text: fileorpart }">
                  {{
                    fileorpart === '0'
                      ? t('routes.demo.partManager.file')
                      : t('routes.demo.partManager.part')
                  }}
                </template>
                <!-- 是否为关联文件 -->
                <template #isshortcut="{ text: isshortcut }">
                  {{ isshortcut === '0' ? t('common.no') : t('common.yes') }}
                </template>
              </BasicTable>
            </Col>
          </Row>
        </Col>
      </Row>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, getCurrentInstance } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { Row, Col, Tabs, TabPane, Tree } from 'ant-design-vue';

  import { getPartData } from '/@/api/demo/partManager';
  import { getDirectoryLevel } from '/@/api/demo/document';
  import { getPartColumns } from './tableData';

  const { t } = useI18n();
  const emit = defineEmits(['register', 'addCommonMap', 'addAssociated']);
  const { proxy }: any = getCurrentInstance();
  const activeKey = ref('1');
  const selectedPartKey = ref<string>('');
  const partSuperId = ref<number>(1);
  const partData = ref<any>([]);
  const expandedKeys = ref<string[]>([]);
  const currentRecord = ref<any>({});
  // 判断是共图还是关联
  const isWhat = ref<string>('');

  // 接口
  getDirectoryLevel(partSuperId.value).then((res) => {
    partData.value = res;
  });

  // 提交
  async function handleSubmit() {
    if (isWhat.value === '共图') {
      emit('addCommonMap', currentRecord.value);
    } else if (isWhat.value === '关联') {
      emit('addAssociated', currentRecord.value);
    }
    handleClose();
  }

  // 关闭
  const handleClose = () => {
    currentRecord.value = {};
    selectedPartKey.value = '';
    partSuperId.value = 1;
    expandedKeys.value = [];
    closeModal();
  };

  // 方法
  const selectPart = (selectedKeys) => {
    selectedPartKey.value = selectedKeys[0];
    reload();
  };

  // 定义弹窗是否可见
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    isWhat.value = data.isWhat;
  });

  // 初始化表格
  const [registerTable, { reload }] = useTable({
    api: getPartData,
    beforeFetch: () => {
      return selectedPartKey.value;
    },
    columns: getPartColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    // pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    isTreeTable: true,
    childrenColumnName: 'sonpfi',
    rowKey: 'id',
    rowSelection: {
      type: 'radio',
      onSelect: (record) => {
        currentRecord.value = record;
      },
    },
    customRow: (record: Recordable) => {
      return {
        onClick: () => {
          currentRecord.value = record;
        },
      };
    },
  });
</script>

<style lang="less" scoped></style>
